<template>
  <div>
    <h3>基本用法（继承 Element Plus 属性）</h3>

    <TableSearch :updateTableList="updateTableList" :conditionList="conditionList" @search="handleSearch"
      @reset="handleReset" />

    <OverflowTooltip content="这是一段非常非常非常非常非常非常非常非常非常非常长的文本" width="200px" placement="bottom-start" effect="light"
      popper-class="custom-tooltip" />

    <h3>使用插槽和自定义样式</h3>
    <OverflowTooltip width="200px" class="custom-container" style="font-weight: bold;" transition="el-fade-in-linear">
      <span style="color: blue;">这是一段带样式的非常非常非常非常非常非常非常非常非常非常长的文本</span>
    </OverflowTooltip>

    <h3>完全继承 Tooltip 属性</h3>
    <OverflowTooltip content="这段文字很长" width="150px" :offset="10" :show-after="500" :hide-after="200" />
    <!-- <header>
      <Dropdown placement="bottom" :trigger="trigger" :menu-options="options"
        @visible-change="e => inlineConsole('visible change', e)" @select="e => inlineConsole('select', e)" manual
        ref="tooltipRef">
        <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
      </Dropdown>
    </header>

    <Icon icon="arrow-up" :size="size" type="danger" color="#0e7a0d" />
    <main>
      <Button ref="buttonRef" @click="open">Test Button</Button>
      <Button plain @click="close">Plain Button</Button>
      <Button round>Round Button</Button>
      <Button circle>VK</Button>
      <Button disabled>Disabled Button</Button><br /><br />
      <Button type="primary">Primary</Button>
      <Button type="success">Success</Button>
      <Button type="info">Info</Button>
      <Button type="warning">Warning</Button>
      <Button type="danger">Danger</Button><br /><br />
      <Button type="primary" plain>Primary</Button>
      <Button type="success" plain>Success</Button>
      <Button type="info" plain>Info</Button>
      <Button type="warning" plain>Warning</Button>
      <Button type="danger" plain>Danger</Button><br /><br />
      <Button size="large">Large</Button>
      <Button size="small">Small</Button><br /><br />
      <Button size="large" loading>Loading</Button>
      <Button size="large" icon="arrow-up">Icon</Button><br /><br />

      <Collapse v-model="openedValue">
        <Item name="a" title="Title A">
          <h1>headline title</h1>
          <div> this is content a aaa </div>
        </Item>
        <Item name="b" title="Title B">
          <div> this is bbbbb test </div>
        </Item>
        <Item name="c" title="Disabled Title" disabled>
          <div> this is cccc test </div>
        </Item>
      </Collapse>
      {{ openedValue }}
    </main> -->
    <h3>虚拟列表示例</h3>
    <VirtualList :data="largeData" :item-height="30" height="200px">
      <template #default="{ item, index }">
        <div>{{ index }} - {{ item }}</div>
      </template>
    </VirtualList>
  </div>
</template>
<script setup lang="ts">
// eslint-disable-next-line no-unused-vars
import { ref, onMounted, h, reactive } from 'vue'
import Dropdown from './components/Dropdown/Dropdown.vue'
import type { MenuOption } from './components/Dropdown/types'
import Button from './components/Button/Button.vue'
import Collapse from './components/Collapse/Collapse.vue'
import Item from './components/Collapse/CollapseItem.vue'
import Icon from './components/Icon/Icon.vue'
import OverflowTooltip from './components/OverflowTooltip/OverflowTooltip.vue'
import { createMessage } from './components/Message/method'
import type { ButtonInstance } from './components/Button/types'
import type { TooltipInstance } from './components/Tooltip/types'
import VirtualList from './components/VirtualList/VirtualList.vue';
import TableSearch from './components/TableSearch/TableSearch.vue'
const largeData = Array.from({ length: 1000 }, (_, index) => `Item ${index}`);
const buttonRef = ref<ButtonInstance | null>(null)
const tooltipRef = ref<TooltipInstance | null>(null)
const openedValue = ref(['a'])
const size = ref<any>('3x')
const trigger = ref<any>('click')
const options: MenuOption[] = [
  { key: 1, label: h('b', 'this is bold') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' }
]
const open = () => {
  createMessage({ message: 'hello world', duration: 0, showClose: true })
  tooltipRef.value?.show()
}
const close = () => {
  tooltipRef.value?.hide()
}
const inlineConsole = (...args: any) => {
  console.log(...args)
}
onMounted(() => {
  // createMessage({ message: 'hello world', duration: 0, showClose: true })
  // createMessage({ message: 'hello world again', duration: 0, type: 'success', showClose: true })
  // createMessage({ message: 'hello world three', duration: 0, type: 'danger', showClose: true })
  // if (buttonRef.value) {
  //   console.log('buttonRef', buttonRef.value.ref)
  // }
  // setTimeout(() => {
  //   openedValue.value = ['a', 'b']
  //   size.value = '2xl'
  //   // instance.destory()
  //   // trigger.value = 'hover'
  // }, 2000)
})
const handleSearch = (params) => {
  console.log('搜索参数:', params);
  // 这里可以处理搜索逻辑
};

const handleReset = (params) => {
  console.log('重置参数:', params);
  // 这里可以处理重置逻辑
};

// 定义表格数据每项的类型
type tableDataItem = {
  username: string;
  age: number;
  address: string;
  big: string;
  color: string;
  hobby: string;
  sex: string;
  school: string;
  grade: string;
};
// 表格加载loading
const loading = ref(false);
// 表格数据
let tableData = ref<tableDataItem[]>([]);
// 表格数据总条数
const total = ref(0);
// 查询条件配置项
// type 是查询条件里面的组件类型 如input select等，可以自行添加需要的组件
const conditionList = reactive([
  {
    id: 1,
    type: "input",
    label: "用户名称",
    prop: "username",
    placeholder: "请输入用户名称",
    span: 6,
  },
  {
    id: 2,
    type: "select",
    label: "个头大小",
    prop: "big",
    placeholder: "请选择个头大小",
    optionList: [
      {
        label: "大",
        value: 1,
      },
      {
        label: "小",
        value: 0,
      },
    ],
    span: 6,
  },
  {
    id: 3,
    type: "select",
    label: "性别",
    prop: "sex",
    placeholder: "请选择性别",
    optionList: [
      {
        label: "男",
        value: 1,
      },
      {
        label: "女",
        value: 0,
      },
    ],
    span: 6,
  },
  {
    id: 4,
    type: "input",
    label: "地址",
    prop: "address",
    placeholder: "请输入地址",
    span: 6,
  },
  {
    id: 5,
    type: "datetime",
    label: "档案时间",
    prop: "time",
    span: 6,
  },
]);
const reqTableList = async (reqParams: any) => {
  // 模拟请求
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: {
          list: [
            {
              username: "张三",
              age: 18,
              address: "北京市",
              big: 1,
              color: "red",
            }
          ]
        }
      })
    })
  })
};
// 请求数据代码仅供参考，这里放自己的业务逻辑
const updateTableList = async (reqParams: any) => {
  loading.value = true;
  const { code, data }: any = await reqTableList(reqParams);
  if (code === 200) {
    tableData.value = data.list.map((item: tableDataItem) => ({
      ...item,
      bigLabel: item.big ? "大" : "小",
      sexLabel: item.sex ? "男" : "女",
    }));
    total.value = data.total;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  }
};
</script>

<style>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  border: 1px solid green;
}

.vk-tooltip__popper {
  border: 1px solid red;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
